<template>
	<view :style="{'background-color':pageBg}" style="float: left;width: 100%;min-height: 100%;">
		<view class="container  css-theme" :class="[cueTheme]" :style="{'background-color':pageBg}">
			<view class="top_box">
				<view v-if="user.member != 1" style="color: red;text-align: center;">非会员只能增加一条数据</view>

				<view class="item_box_title css-theme" :class="[cueTheme]">
					<view style="float: left;width: 100%;">名称
					</view>
				</view>
				<view class="container_box_top css-theme" :class="[cueTheme]"
					style="border-radius: 5px;margin-top: 40rpx;">
					<view class="container_box_left" style="width: 20%;">
						<view @click="showPopup" style="align-items: center;text-align: center;">
							<span class="checkedIcon_top" v-if="backgroundIndex==''">
								<image class="iconClass_top" style="margin-top:10px;" :src="globalUrl+checkedIcon">
								</image>
							</span>
							<span class="checkedIcon_top" v-else
								:style="'background-color:'+backgroundIndex+' !important'">
								<image class="iconClass_top" style="margin-top:10px;" :src="globalUrl+checkedIcon">
								</image>
							</span>
						</view>
					</view>
					<view class="container_box_left" style="width: 80%;">

						<input v-model="name" type="text" placeholder="请输入名称" placeholder-class="placeholder_style" />
					</view>
				</view>


				<view class="item_box_title css-theme" :class="[cueTheme]">
					<view style="float: left;width: 100%;">开始时间 - 结束时间
					</view>
				</view>


				<view class="container_box css-theme" :class="[cueTheme]">
					<picker @change="bindPickerChangeTime" mode="time" :value="pickerValue"
						style="width: 50%;float: left;">
						<view class="container_box_left">
							<view class="flex-item ">{{ pickerValue}}</view>

						</view>
					</picker>
					<text class="container_box_left_text">|</text>
					<picker @change="bindPickerChangeTimeEnd" mode="time" :value="pickerValueEnd"
						style="width: 50%;float: left;">
						<view class="container_box_left">
							<view class="flex-item ">{{ pickerValueEnd}}</view>

						</view>
					</picker>
					<!-- <picker @change="bindPickerChangeLong" :value="duration" :range="pickerValueList" style="width: 50%;float: left;">
						<view class="container_box_left" >
							<view class="flex-item ">{{ duration}}分钟</view>
						</view>
					</picker> -->

					<!-- <picker @change="bindPickerChangeTime" :value="pickerValue" :range="pickerValueList">
						<view class="container_box">
							<view class="container_box_left">
								<view style="width: 400rpx;">周期长度</view>
								<view class="flex-item image_v">{{ pickerValueList[pickerValue]}}天<text
										class="tn-icon-right tn-color-gray"></text></view>
							</view>
						</view>
					</picker>
					<view class="container_box_left" style="width: 50%;">
						<view class="flex-item image_v">
						 <cu-progress class="progress" min="1" showInfo='true' @change="changeDuration"
								:value="duration" infoEndText="分钟"></cu-progress> 
						</view>
					</view> -->
				</view>
				<view class="contentnav">
					<view class="nav">
						<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation>
							<view class="tab-scroll_box">

								<view class="tab-scroll_item" style="padding: 1px 5px;border-radius: 10px;" v-for=" (item,index) in timeArr" :key="index"
									:class="{'activeTime':isActiveTime==index}" @click="chenkedTime(item,index)">
									{{item.showtime}}
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<!-- <view class="container_box css-theme" :class="[cueTheme]">
						<view class="container_box_left">
							<view class="flex-item image_v">
								<cu-progress class="progress" min="1" showInfo='true' @change="changeDuration" value=15
									infoEndText="分钟"></cu-progress>
							</view>
						</view>
					</view> -->

				<!-- <view class="item_box_title css-theme" :class="[cueTheme]">
					<view style="float: left;width: 100%;">时长
					</view>
				</view>
				-->
				<view class="item_box_title css-theme" :class="[cueTheme]">
					<view style="float: left;width: 100%;">重复<text style="font-size: 12px;font-weight: normal;"
							v-if="nameStr!=''">【{{nameStr}}】</text>
					</view>
				</view>

				<view class="container_box css-theme" :class="[cueTheme]">
					<view class="contentclass">
						<view class="nav">
							<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation
								:scroll-left="scrollLeft">
								<view class="tab-scroll_box">
									<view class="tab-scroll_item" v-for=" (item,index) in itemListCF" :key="index"
										:class="{'active':itemId==item.id}" @click="checkItem(item)">
										{{item.name}}
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
				<view v-if="itemId == 0" class="item_box_title css-theme" :class="[cueTheme]">
					<view style="float: left;width: 100%;">日期
					</view>
				</view>
				<view v-if="itemId == 0" class="container_box css-theme" :class="[cueTheme]">
					<view class="container_box_left">
						<picker mode="date" @change="onDateChange" style="width: 100%;float:left">
							<!-- <input v-model="startDate" type="text" placeholder="日期(必填)"
								placeholder-class="placeholder_style" /> -->
							<text style="width: 100%;float:left">{{startDate}}</text>
						</picker>
					</view>
				</view>
				<view v-if="itemId != 0" class="item_box_title css-theme" :class="[cueTheme]">
					<view style="float: left;width: 100%;">开始日期 - 结束日期
					</view>
				</view>
				<view v-if="itemId != 0" class="container_box css-theme" :class="[cueTheme]">
					<view class="container_box_left">
						<picker mode="date" @change="onDateChange" style="width: 50%;float:left">
							<!-- <input v-model="startDate" type="text" placeholder="开始日期(必填)"
								placeholder-class="placeholder_style" /> -->
							<view style="width: 100%;float:left">{{startDate}}</view>
						</picker>
						<text class="container_box_left_text">|</text>
						<picker mode="date" @change="onDateChangeEnd" style="width: 50%;float:left">
							<!-- <input v-model="endDate" type="text" placeholder="结束日期大于开始日期(必填)"
								placeholder-class="placeholder_style" /> -->
							<view style="width: 100%;float:left">{{endDate}}</view>
						</picker>
						<text class="tn-icon-clear" @click="setEndDate"></text>
					</view>
				</view>

				<view class="item_box_title css-theme" :class="[cueTheme]">
					<view style="float: left;width: 100%;">子任务
					</view>
				</view>
				<view v-for="(itemIn, indexIn) in config" @click="showPropertyBigArray(itemIn,indexIn)"
					class="container_box_add  css-theme" :class="[cueTheme]">
					<view class="container_box_left">
						<view @click.stop="delBigProperty(itemIn,indexIn)" class="tn-icon-reduce-circle-fill"
							style="color: #F84B47;font-size: 20px;"></view>
						<view class="tn-margin-left-sm tn-flex-1">{{ itemIn.name }}
						</view>
					</view>
				</view>

				<view style="border-bottom:0px" class="container_box_add  css-theme" @click="showBigProperty"
					:class="[cueTheme]">
					<view class="container_box_left" style="text-align: center;">
						<view style="width: 100%;" class="tn-icon-add"></view>
					</view>
				</view>



				<view style="float: left;width: 100%;margin-top: 40rpx;">
					<button @click="saveData()"
						style="border-radius: 10px;background-color:#5A9CFC ;color:white;font-weight: bolder;">保存</button>
				</view>
			</view>

			<mypopup title="" :mask="false" v-model="show" height="540px" :showHeader="false"
				style="position: relative;">
				<view
					style="width: 60px;height: 10rpx;background-color: #ccc;position: absolute; top:5px;margin-left: 320rpx;border-radius: 20px;">
				</view>

				<view class="popup-content">
					<view style="padding: 10px 0px;border-radius: 5px;" class="input-container  css-theme"
						:class="[cueTheme]">

						<view class="contentnav">
							<view class="nav">
								<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation>
									<view class="tab-scroll_box">
										<view class="tab-scroll_item" v-for=" (item,index) in itemList" :key="index"
											@tap="checkThis(item.index,item.background)">
											<view class="color_style" :style="'background-color:'+item.background">
												<text v-if="checkedIndex == item.index" class="checkmark"></text>
											</view>
										</view>
									</view>
								</scroll-view>
							</view>

						</view>
					</view>

					<view style="float: left;width: 100%;margin-top: 10px;border-radius: 5px;">

						<view class="contentclass">
							<view class="nav css-theme" :class="[cueTheme]">
								<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation
									:scroll-left="scrollLeft">
									<view class="tab-scroll_box">
										<view class="tab-scroll_item" v-for=" (item,index) in category" :key="index"
											:class="{'active':isActive==index}" @click="chenked(item)">
											{{item.name}}
										</view>
									</view>
								</scroll-view>
							</view>
						</view>


						<view @change="change" :current="isActive" style="height:400px" :autoplay="false" circular>
							<view class="swiper_item">
								<scroll-view style="height:400px;width: 100%;float:left;" class="scroll-view_H"
									scroll-y="true">
									<view style="float: left;width: 100%;">
										<u-grid :col="5" :border="false">
											<u-grid-item v-for=" (val,index) in iconList" :key="index"
												@tap="checkIcon(index,val)">
												<view v-if="checkedIcon==val.url"
													:style="'background-color:'+backgroundIndex"
													class="u-grid-item-cls">
													<image class="iconClass" :src="globalUrl+val.url"></image>
													<text class="tn-icon-success-circle-fill iconstyle"></text>
												</view>
												<view v-else style="background-color:#F3F4F6" class="u-grid-item-cls">
													<image class="iconClass" :src="globalUrl+val.url"></image>
												</view>
												<view class="grid-text">{{val.name}}</view>
											</u-grid-item>
										</u-grid>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>

				</view>
			</mypopup>
		</view>
		<!-- 具体属性 -->
		<tn-popup v-model="show_popup_bottom_propertyDetail" mode="center" width="650rpx" :borderRadius="15"
			:backgroundColor="pageBg">
			<view style="float: left;width: 100%;padding: 20px;">

				<view class="item_box_title  css-theme" :class="[cueTheme]">
					<view style="float: left;width: 100%;">名称</view>
				</view>
				<view class="container_box  css-theme" :class="[cueTheme]">
					<view class="container_box_left">
						<input v-model="propertyName" maxlength="32" type="text" placeholder="请输入"
							placeholder-class="placeholder_style" />
					</view>
				</view>

				<view class="category-item-save">
					<view class="save_btn" @click="saveProperty()">保存</view>
				</view>
			</view>

		</tn-popup>

		<!-- 	<u-calendar-timeline z-index="1002" max-date="2200-11-23" @myCalendarEvent="myCalendarEvent"
			v-model="showCalendar" :closeable="false" :mode="modeCalendar" @repeatIdDisplay="repeatIdDisplay"
			@pickTime="pickTime" @change="changeCalendar" @changeDuration="changeDuration"></u-calendar-timeline> -->



		<!-- 	<tn-popup v-model="show_popup_bottom" mode="bottom" height="60%" :backgroundColor="pageBg">

			<view :style="{'background-color':pageBg}" :class="[cueTheme]" class="container_box css-theme"
				v-for="(item, index) in itemListCF" :key="index" @click="checkItem(item)">
				<view class="container_box_left">
					<view style="width: 400rpx;">{{item.name}}</view>
					<view class="flex-item image_v" v-if="itemId==item.id"><text class="tn-icon-success "></text></view>
				</view>
			</view>
		</tn-popup> -->
		<!-- 周 -->
		<tn-popup v-model="show_popup_bottom_week" mode="center" width="690rpx" :borderRadius="20"
			:backgroundColor="pageBg">
			<view class="container_bot css-theme" :class="[cueTheme]">
				<view class="row_bot">

					<view class="category-item" v-for=" (item,indexWeek) in weekList" :key="indexWeek"
						:class="{'activeitem':item.selected==1}" @click="chenkedWeek(item)">
						{{item.name}}
					</view>
				</view>
				<view @click="updateData('week')" style="position: absolute;top:10px;right:10px;color: #5A9CFA;">确定
				</view>
				<view @click="cancelBottom('week')" style="position: absolute;top:10px;left:10px;color: #5A9CFA;">取消
				</view>
			</view>

		</tn-popup>
		<!-- 月 -->
		<tn-popup v-model="show_popup_bottom_month" mode="center" width="690rpx" :borderRadius="20"
			:backgroundColor="pageBg">
			<view class="container_bot css-theme" :class="[cueTheme]">
				<view class="row_bot">

					<view class="category-item-month" v-for=" (item,indexWeek) in monthList" :key="indexWeek"
						:class="{'activeitem':item.selected==1}" @click="chenkedMonth(item)">
						{{item.name}}
					</view>
				</view>
				<view @click="updateData('month')" style="position: absolute;top:10px;right:10px;color: #5A9CFA;">确定
				</view>
				<view @click="cancelBottom('month')" style="position: absolute;top:10px;left:10px;color: #5A9CFA;">取消
				</view>
			</view>

		</tn-popup>

		<tn-popup v-model="show_popup_bottom_year" mode="center" width="690rpx" :borderRadius="20"
			:backgroundColor="pageBg">
			<view class="container_bot css-theme" :class="[cueTheme]">
				<view class="row_bot">
					<u-picker mode="time" v-model="show_time" :params="params_time" @confirm="confirm"></u-picker>

					<view style="width: 100%;">
						<view class="timeshow" v-for=" (item,warnTimeArrIndex) in warnTimeArr" :key="warnTimeArrIndex">
							{{item}}
							<text class="timeshow_del" @click="delTime(warnTimeArrIndex)">-</text>
						</view>
						<view class="timeshow" @click="showTime()">
							+
						</view>
					</view>
				</view>
				<view @click="updateData('year')" style="position: absolute;top:10px;right:10px;color: #5A9CFA;">确定
				</view>
				<view @click="cancelBottom('year')" style="position: absolute;top:10px;left:10px;color: #5A9CFA;">取消
				</view>
			</view>

		</tn-popup>
		
		<tn-popup v-model="show_popup_bottom_jiange" mode="center" width="690rpx" :borderRadius="20"
			:backgroundColor="pageBg">
			<view class="container_bot css-theme" :class="[cueTheme]">
				<view class="row_bot" style="padding: 10px 40px;text-align: center;">
					间隔<input v-model="jiangeDay" type="number" @input="handleInput"  min="1" placeholder="请输入间隔天数" placeholder-class="placeholder_style" />天
				</view>
				<view @click="updateData('jiange')" style="position: absolute;top:10px;right:10px;color: #5A9CFA;">确定
				</view>
				<view @click="cancelBottom('jiange')" style="position: absolute;top:10px;left:10px;color: #5A9CFA;">取消
				</view>
			</view>
		
		</tn-popup>
		<tn-popup v-model="show_popup_center" mode="center" width="690rpx" :borderRadius="20" :backgroundColor="pageBg">

			<view :style="{'background-color':pageBg}" style="padding: 10px 10px;margin:0px 0px;"
				class="container_box css-theme" :class="[cueTheme]" @click="appUpdateOneSchedule()">
				<view class="container_box_left" style="justify-content: center;">
					<view class="flex-item">更新当前任务</view>
				</view>
			</view>
			<view :style="{'background-color':pageBg}"
				style="padding: 10px 10px;border-top: 1px solid #f1f1f1;margin:0px 0px;" class="container_box css-theme"
				:class="[cueTheme]" @click="appUpdateFutureSchedule()">
				<view class="container_box_left" style="justify-content: center;">
					<view class="flex-item">更新所有未来任务</view>
				</view>
			</view>
			<view :style="{'background-color':pageBg}"
				style="padding: 10px 10px;border-top: 1px solid #f1f1f1;margin:0px 0px;" class="container_box css-theme"
				:class="[cueTheme]" @click="updateSchedule()">
				<view class="container_box_left" style="justify-content: center;">
					<view class="flex-item">更新所有任务</view>
				</view>
			</view>
			<view :style="{'background-color':pageBg}"
				style="padding: 10px 10px;border-top: 1px solid #f1f1f1;margin:0px 0px;" class="container_box css-theme"
				:class="[cueTheme]" @click="show_popup_center = false">
				<view class="container_box_left" style="justify-content: center;font-weight: bolder;">
					<view class="flex-item">取消</view>
				</view>
			</view>
		</tn-popup>

	</view>
</template>
<script>
	var _self;
	import mypopup from '@/components/hqs-popup/hqs-popup.vue'
	import icons from '@/common/icon.js'
	import mytime from '@/common/mytime.js'
	import syscalendar from '@/common/sysCalender.js';

	import dayjs from '@/dayjs.min.js'
	export default {
		components: {
			mypopup,
		},
		watch: {

		},
		data() {
			return {
				globalUrl: getApp().globalData.url,
				//日历
				modeCalendar: 'date',
				showCalendar: false,
				//日历结束
				show_time: false,
				params_time: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				// 弹窗
				show: false,
				mode: 'bottom',
				backgroundColor: '',
				width: '',
				height: '30%',
				borderRadius: 20,
				closeBtn: true,
				closeBtnIcon: 'close',
				closeBtnPosition: 'top-right',
				maskCloseable: true,
				id: 0,
				userId: '',
				curNow: 0,
				name: '',
				remark: '',
				checkedIconIndex: 220,
				checkedIcon: '',
				backgroundIndex: '#F8BCB1',
				checkedIndex: 0,
				indexWeek: 0,
				type: 0,
				isActive: 0,
				isActiveTime:1,
				isActiveFl: 0,
				indexFl: 0,
				currentindex: 0,
				index: 0,
				scrollLeft: 0,
				scrollTop: 0,
				itemList: icons.colorList,
				iconList: [],
				category: icons.iconCategory,
				checkNumber: 0,

				startTime: '',
				endTime: '',
				config: [],
				show_popup_bottom_propertyDetail: false,
				show_popup_bottom: false,
				propertyName: '',
				bigIndex: 0,
				duration: 15,
				matterRepeat: {
					type: 0,
					repeatDays: ''
				},
				startDate: '',
				endDate: '永远',
				weekDayZh: ['日', '一', '二', '三', '四', '五', '六'],
				nType: 0,
				pickerValue: '',
				pickerValueEnd: '',
				show_popup_bottom: false,
				show_popup_bottom_week: false,
				show_popup_bottom_month: false,
				show_popup_bottom_year: false,
				show_popup_bottom_jiange:false,
				jiangeDay:1,
				show_popup_center: false,
				monthList: [],
				weekList: [{
						id: 2,
						name: '周一',
						selected: 0,
					},
					{
						id: 3,
						name: '周二',
						selected: 0,
					},
					{
						id: 4,
						name: '周三',
						selected: 0,
					},
					{
						id: 5,
						name: '周四',
						selected: 0,
					},
					{
						id: 6,
						name: '周五',
						selected: 0,
					},
					{
						id: 7,
						name: '周六',
						selected: 0,
					},
					{
						id: 1,
						name: '周日',
						selected: 0,
					}
				],
				itemListCF: [{
						id: 0,
						name: '不重复',
					},
					{
						id: 1,
						name: '每天',
					},
					{
						id: 2,
						name: '每周',
					},
					{
						id: 3,
						name: '每月',
					},
					{
						id: 4,
						name: '间隔',
					},

				],
				itemId: 0,
				itemName: '不重复',
				params_time: {
					year: false,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				warnTimeArr: [], //提醒时间
				warnTimeArrIndex: 0,
				nameStr: '',
				dataSubmit: {},
				newDate: '',
				pickerValueList: [],
				user: [],
				timeArr: [{
						time: 1,
						showtime: '1分钟'
					},
					{
						time: 15,
						showtime: '15分钟'
					},
					{
						time: 30,
						showtime: '30分钟'
					},
					{
						time: 45,
						showtime: '45分钟'
					},
					{
						time: 60,
						showtime: '1小时'
					},
					{
						time: 90,
						showtime: '1.5小时'
					},
					{
						time: 120,
						showtime: '2小时'
					}
				],
				copystatus:''


			};
		},
		destroyed() {
			// _self.saveData();
		},
		onShow() {

			uni.getStorage({
				key: 'user',
				success: function(res) {
					if (res.data) {
						_self.user = res.data

					}
				},
				fail: function(e) {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			})
		},
		onLoad(options) {
			for (var i = 0; i <= 360; i++) {
				this.pickerValueList.push(i)
			}
			_self = this
			const now = new Date(); // 获取当前时间
			const hours = now.getHours() < 10 ? ("0" + now.getHours()) : now.getHours(); // 获取当前小时数
			const minutes = now.getMinutes() < 10 ? ("0" + now.getMinutes()) : now.getMinutes(); // 获取当前分钟数
			this.pickerValue = `${hours}:${minutes}`; // 初始化选择器的值为当前时间
			this.startTime = this.pickerValue + ":00"
			this.endTime = this.addMinutesToTime(this.startTime, 15)

			this.pickerValueEnd = this.endTime.split(":")[0] + ":" + this.endTime.split(":")[1]
			this.startDate = dayjs().format('YYYY-MM-DD')
			this.monthList = []
			this.newDate = options.time
			_self.userId = options.userId
			for (var i = 1; i < 32; i++) {
				var data = {
					id: i,
					name: i,
					selected: 0,
				}
				this.monthList.push(data)
			}

			
			
			
			if(options.id>0){
				this.copystatus = options.copystatus
				this.getDetail(options.id)
				
			} else {
				this.startDate = options.time
			}
			_self.getIconList();
			
			
		},
		methods: {
			
			getDetail(id){
				var data = {
					id: id
				}
				this.$api.getScheduleAppDetail(data).then((res) => {
					var resData = res;
				
					if (resData.code == "200") {
						var item = resData.data;
	
						console.log(item)
						_self.id = item.id
						_self.name = item.name
						_self.backgroundIndex = item.color
						_self.checkedIconIndex = item.icon
						_self.pickerValue = item.startTime.replace(":00", "")
						_self.startTime = item.startTime.replace(":00", "")
						_self.endTime = item.endTime.replace(":00", "")
						_self.pickerValueEnd = _self.endTime.split(":")[0] + ":" + _self.endTime.split(":")[1]
						_self.startDate = item.startDate
						_self.endDate = item.endDate
						
						if (_self.endDate == "" || _self.endDate == null) {
							_self.endDate = "永远"
						}
						_self.duration = parseInt(item.duration)
						_self.config = item.subInfo == "" ? {} : JSON.parse(item.subInfo)
						_self.matterRepeat.repeatDays = item.repeatTime
						_self.matterRepeat.type = item.repeatType
						_self.itemId = item.repeatType
						if (_self.matterRepeat.type == 2) {
							for (var i = 0; i < _self.weekList.length; i++) {
								if (_self.checkWeekAndMonth(_self.weekList[i].id)) {
									_self.weekList[i].selected = 1
								}
							}
						
							var nameStr = ''
							var bFirst = 0;
							for (var i = 0; i < _self.weekList.length; i++) {
						
								if (_self.weekList[i].selected == 1) {
									if (bFirst == 0) {
										nameStr += _self.weekList[i].name
									} else {
										nameStr += "、" + _self.weekList[i].name
									}
									bFirst = 1;
								}
						
							}
							_self.nameStr = "每" + nameStr
						} else if (_self.matterRepeat.type == 3) {
							for (var i = 0; i < _self.monthList.length; i++) {
						
								if (_self.checkWeekAndMonth(_self.monthList[i].id)) {
									_self.monthList[i].selected = 1
								}
							}
							var nameStr = ''
							var bFirst = 0;
							for (var i = 0; i < _self.monthList.length; i++) {
						
								if (_self.monthList[i].selected == 1) {
									if (bFirst == 0) {
										nameStr += _self.monthList[i].name
									} else {
										nameStr += "、" + _self.monthList[i].name
									}
									bFirst = 1;
								}
							}
							_self.nameStr = "每月" + nameStr + "号"
						}else if (_self.matterRepeat.type == 4) {
							_self.jiangeDay = _self.matterRepeat.repeatDays
							_self.nameStr = "间隔" + _self.matterRepeat.repeatDays + "天"
						}
						
						if(_self.copystatus == 1){
							_self.id = ''
						}
					}
				})
			},
			 handleInput(event) {  
			      const value = event.target.value;  
			      // 使用正则表达式验证输入是否为正整数（包括前导零的情况，但min=1会阻止输入0）  
			      const regex = /^\d+$/;  
			        
			      if (!regex.test(value) || (value && parseInt(value) <= 0)) {  
			       
			        this.jiangeDay = ''; // 或者你可以设置为上一个有效的值  
			      } else {  
			        
			      }  
			    } ,

			checkWeekAndMonth(id) {
				var repeatList = _self.matterRepeat.repeatDays.split(",")
				for (var i = 0; i < repeatList.length; i++) {
					if (repeatList[i] == id) {
						return true
					}
				}
				return false
			},

			setEndDate() {
				this.endDate = '永远'
			},
			getRepeatData() {
				var data = {}
				if (this.itemId == 2) { //周
					var repeat_time = "";
					var bFirst = 0;
					for (var i = 0; i < _self.weekList.length; i++) {

						if (_self.weekList[i].selected == 1) {
							if (bFirst == 0) {
								repeat_time += _self.weekList[i].id
							} else {
								repeat_time += "," + _self.weekList[i].id
							}
							bFirst = 1;
						}

					}
					data = {
						type: this.itemId,
						repeatDays: repeat_time
					}
				} else if (this.itemId == 3) { //月
					var repeat_time = "";
					var bFirst = 0;
					for (var i = 0; i < _self.monthList.length; i++) {

						if (_self.monthList[i].selected == 1) {
							if (bFirst == 0) {
								repeat_time += _self.monthList[i].id
							} else {
								repeat_time += "," + _self.monthList[i].id
							}
							bFirst = 1;
						}
					}
					data = {
						type: this.itemId,
						repeatDays: repeat_time
					}
				} else if (this.itemId == 4) { //间隔天数
					data = {
						type: this.itemId,
						repeatDays: _self.jiangeDay
					}
				} else {
					data = {
						type: this.itemId,
						repeatDays: this.startDate
					}
				}

				this.matterRepeat = data
			},

			showTime() {
				this.show_time = true
			},
			delTime(warnTimeArrIndex) {
				_self.warnTimeArr.splice(warnTimeArrIndex, 1);
			},
			confirm(e) {
				console.log(e)
				var _self = this
				if (_self.warnTimeArr.indexOf(e.month + "-" + e.day) == -1) {
					_self.warnTimeArr.push(e.month + "-" + e.day)
				} else {
					uni.showToast({
						title: "已存在",
						duration: 2000,
						icon: "none"
					});
				}

			},
			//确认
			updateData(type) {

				if (type == 'week') {
					this.show_popup_bottom_week = false;
				} else if (type == 'month') {
					this.show_popup_bottom_month = false;
				} else if (type == 'year') {
					this.show_popup_bottom_year = false;
				}else if (type == 'jiange') {
					if(_self.jiangeDay == ''){
						_self.jiangeDay = 1
					}
					_self.nameStr = "间隔" + _self.jiangeDay + "天"
					this.show_popup_bottom_jiange = false;
				}

			},

			cancelBottom(type) {
				if (type == 'week') {
					this.show_popup_bottom_week = false;
				} else if (type == 'month') {
					this.show_popup_bottom_month = false;
				} else if (type == 'year') {
					this.show_popup_bottom_year = false;
				}else if (type == 'jiange') {
					this.show_popup_bottom_jiange = false;
				}
			},
			chenkedWeek(item) {
				var _self = this

				for (var i = 0; i < _self.weekList.length; i++) {
					if (item.id == _self.weekList[i].id) {
						if (_self.weekList[i].selected == 0) {
							_self.weekList[i].selected = 1


						} else {
							_self.weekList[i].selected = 0

						}
					}
				}

				var nameStr = ''
				var bFirst = 0;
				for (var i = 0; i < _self.weekList.length; i++) {

					if (_self.weekList[i].selected == 1) {
						if (bFirst == 0) {
							nameStr += _self.weekList[i].name
						} else {
							nameStr += "、" + _self.weekList[i].name
						}
						bFirst = 1;
					}

				}
				_self.nameStr = "每" + nameStr

			},
			chenkedMonth(item) {
				var _self = this

				for (var i = 0; i < _self.monthList.length; i++) {
					if (item.id == _self.monthList[i].id) {
						if (_self.monthList[i].selected == 0) {
							_self.monthList[i].selected = 1

						} else {
							_self.monthList[i].selected = 0

						}
					}
				}
				var nameStr = ''
				var bFirst = 0;
				for (var i = 0; i < _self.monthList.length; i++) {

					if (_self.monthList[i].selected == 1) {
						if (bFirst == 0) {
							nameStr += _self.monthList[i].name
						} else {
							nameStr += "、" + _self.monthList[i].name
						}
						bFirst = 1;
					}
				}
				_self.nameStr = "每月" + nameStr + "号"
			},

			showMode() {
				this.show_popup_bottom = true
			},
			checkItem(item) {
				this.show_popup_bottom = false
				this.itemId = item.id
				this.itemName = item.name
				if (this.itemId == 2) { //每周
					this.show_popup_bottom_week = true
				} else if (this.itemId == 3) { //每月
					this.show_popup_bottom_month = true
				} else if (this.itemId == 4) { //间隔
					
					this.show_popup_bottom_jiange = true
				}


			},
			addMinutesToTime(timeStr, minutesToAdd) {
				// 将时间字符串分解为小时、分钟、秒
				const [hours, minutes, seconds] = timeStr.split(':').map(Number);

				// 计算新的分钟数
				const totalMinutes = hours * 60 + minutes + minutesToAdd;

				// 计算新的小时和分钟
				const newHours = Math.floor(totalMinutes / 60) % 24; // 保证小时在0-23之间
				const newMinutes = totalMinutes % 60;

				// 格式化为HH:mm:ss
				return `${String(newHours).padStart(2, '0')}:${String(newMinutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
			},
			calculateDifference() {
				var startTime = ''
				var endTime = ''
				if (this.startTime.split(":").length == 2) {
					startTime = this.startTime + ":00"
				} else {
					startTime = this.startTime
				}
				if (this.endTime.split(":").length == 2) {
					endTime = this.endTime + ":00"
				} else {
					endTime = this.endTime
				}

				const startParts = startTime.split(':').map(Number);
				const endParts = endTime.split(':').map(Number);

				// 计算开始时间和结束时间的总秒数
				const startTotalSeconds = startParts[0] * 3600 + startParts[1] * 60 + startParts[2];
				const endTotalSeconds = endParts[0] * 3600 + endParts[1] * 60 + endParts[2];

				// 计算时间间隔的秒数
				const intervalSeconds = endTotalSeconds - startTotalSeconds;

				// 将间隔秒数转换为分钟
				const intervalMinutes = Math.floor(intervalSeconds / 60);

				// 转换为分钟
				this.duration = intervalMinutes;
			},
			bindPickerChangeTime: function(e) {
				this.pickerValue = e.detail.value;
				this.startTime = e.detail.value + ":00"
				// this.calculateDifference()
				this.endTime = this.addMinutesToTime(this.startTime, this.duration)
				this.pickerValueEnd = this.endTime.split(":")[0] + ":" + this.endTime.split(":")[1];
			},
			bindPickerChangeTimeEnd: function(e) {
				this.pickerValueEnd = e.detail.value;
				this.endTime = e.detail.value + ":00"
				this.calculateDifference()
			},
			bindPickerChangeLong: function(e) {
				this.duration = e.detail.value;
				this.endTime = this.addMinutesToTime(this.startTime + ":00", this.duration)
			},
			chenkedTime(item,index) {
				this.isActiveTime = index
				this.endTime = this.addMinutesToTime(this.startTime + ":00", item.time)
				console.log(this.endTime)
				this.pickerValueEnd = this.endTime.split(":")[0] + ":" + this.endTime.split(":")[1];
				this.calculateDifference()
			},
			onDateChange(event) {
				this.startDate = event.mp.detail.value;
			},
			onDateChangeEnd(event) {
				this.endDate = event.mp.detail.value;
				if (mytime.compareDate(_self.startDate, _self.endDate) == 0) {
					uni.showToast({
						title: "结束时间须大于开始",
						duration: 2000,
						icon: "none"
					});
					this.endDate = "永远"
				}
			},
			changeDuration(e) {
				console.log(e)
				this.duration = e.value
				console.log(this.startTime + "=====" + this.duration)
				this.endTime = this.addMinutesToTime(this.startTime + ":00", this.duration)
			},
			showBigProperty() {

				this.show_popup_bottom_propertyDetail = true
				this.bigType = 0
				this.propertyName = ''
			},
			delBigProperty(item, index) {
				this.config.splice(index, 1);
			},
			saveProperty() {
				if (this.propertyName == '') {
					uni.showToast({
						title: '请输入名称',
						duration: 2000,
						icon: 'none'
					})
					return
				}

				this.show_popup_bottom_propertyDetail = false

				var data = {
					name: this.propertyName,
				}

				if (this.bigType == 1) { //修改
					this.config[this.bigIndex] = data
				} else {
					this.config.push(data)
				}


			},

			showPropertyBigArray(item, index) {

				this.show_popup_bottom_propertyDetail = true
				this.bigType = 1
				this.bigIndex = index
				this.propertyName = item.name



			},
			myCalendarEvent(data) {
				this.modeCalendar = data
			},

			// changeCalendar(e) {
			// 	if (e.result) {
			// 		this.startTime = e.result
			// 	} else {
			// 		this.startTime = e.startDate
			// 		this.endTime = e.endDate
			// 	}
			// 	this.focus = false
			// 	this.$nextTick(() => {
			// 		this.focus = true
			// 	})
			// },

			pickTime(e) {
				this.startTime = e + ":00"
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(item) {
				this.isActive = item.id;
				this.currentindex = this.isActive;
				_self.getList(item.ids)
			},
			// swiper滑动时，获取其索引，也就是第几个
			change(e) {
				const {
					current
				} = e.detail;
				this.currentindex = current;
				for (var i = 0; i < _self.category.length; i++) {
					if (current == _self.category[i].id) {
						_self.getList(_self.category[i].ids)
						break
					}
				}
			},
			showPopup() {
				this.show = true
			},


			getList(id) {
				var data = {
					type: id
				}
				this.$api.listHabitIcon(data).then((res) => {
					var resData = res;

					if (resData.code == "200") {
						_self.iconList = resData.data;
						for (var i = 0; i < _self.iconList.length; i++) {
							if (_self.checkedIconIndex == _self.iconList[i].id) {
								_self.checkedIcon = _self.iconList[i].url
								break;
							}

						}
					}
				})
			},
			getIconList() {
				var nums = ""
				for (var i = 0; i < _self.category.length; i++) {
					var id = _self.category[i].ids
					if (i == 0) {
						nums = nums + id
					} else {
						nums = nums + "," + id
					}
				}
				var data = {
					types: nums,
				}

				this.$api.listHabitIcon(data).then((res) => {
					var resData = res;
					if (resData.code == "200") {
						for (var i = 0; i < resData.data.length; i++) {
							if (_self.checkedIconIndex == resData.data[i].id) {
								_self.checkedIcon = resData.data[i].url
								for (var n = 0; n < _self.category.length; n++) {
									if (_self.category[n].ids == resData.data[i].type) {
										_self.chenked(_self.category[n]);
										break
									}
								}

								break
							}
						}
					}
				})
			},

			isTimeGreater(time1, time2) {
				// 将时间字符串转换为小时、分钟和秒
				const parseTime = (time) => {
					const [hours, minutes, seconds] = time.split(':').map(Number);
					return hours * 3600 + minutes * 60 + seconds; // 转换为总秒数
				};

				const totalSeconds1 = parseTime(time1);
				const totalSeconds2 = parseTime(time2);

				// 返回是否大于
				return totalSeconds1 > totalSeconds2;
			},
			saveData() {
				if (_self.name == '') {
					uni.showToast({
						title: "名称不为空",
						icon: 'none'
					});
					return;
				}
				if (_self.matterRepeat.type == 2 && _self.matterRepeat.repeatDays == '') {
					uni.showToast({
						title: "请选择日期",
						icon: 'none'
					});
					return
				}
				if (_self.matterRepeat.type == 3 && _self.matterRepeat.repeatDays == '') {
					uni.showToast({
						title: "请选择日期",
						icon: 'none'
					});
					return
				}
				if (_self.matterRepeat.type == 4 && (_self.matterRepeat.repeatDays == '' || _self.matterRepeat.repeatDays == 0)) {
					uni.showToast({
						title: "请输入间隔天数",
						icon: 'none'
					});
					return
				}

				this.getRepeatData()
				var data = {}

				if (_self.startTime.split(":").length == 2) {
					_self.startTime = _self.startTime + ":00"
				}
				if (_self.endTime.split(":").length == 2) {
					_self.endTime = _self.endTime + ":00"
				}


				if (!this.isTimeGreater(_self.endTime, _self.startTime)) {
					uni.showToast({
						title: "结束时间大于开始",
						icon: 'none'
					});
					return
				}


				if (_self.id == '') {
					data = {
						userId: _self.userId,
						name: _self.name,
						color: _self.backgroundIndex,
						icon: _self.checkedIconIndex,
						startTime: _self.startTime,
						endTime: _self.endTime,
						duration: _self.duration,
						subInfo: JSON.stringify(_self.config),
						repeatTime: _self.matterRepeat.repeatDays,
						repeatType: _self.matterRepeat.type,
						startDate: _self.startDate,
						endDate: _self.endDate == "永远" ? "" : _self.endDate,
						time: _self.newDate


					}
				} else {

					data = {
						id: _self.id,
						userId: _self.userId,
						name: _self.name,
						color: _self.backgroundIndex,
						icon: _self.checkedIconIndex,
						startTime: _self.startTime,
						endTime: _self.endTime,
						duration: _self.duration,
						subInfo: JSON.stringify(_self.config),
						repeatTime: _self.matterRepeat.repeatDays,
						repeatType: _self.matterRepeat.type,
						startDate: _self.startDate,
						endDate: _self.endDate == "永远" ? "" : _self.endDate,
						time: _self.newDate
					}
				}

				console.log(data)
				this.dataSubmit = data
				if (_self.matterRepeat.type == 1 && _self.id > 0 ||
					_self.matterRepeat.type == 2 && _self.id > 0 ||
					_self.matterRepeat.type == 3 && _self.id > 0) {
					if (_self.user.member == 1) {
						this.show_popup_center = true
					} else {
						this.updateSchedule()
					}

				} else {

					if (_self.id > 0) {
						// this.appUpdateOneSchedule()
						this.updateSchedule()
					} else {
						this.$api.appAddSchedule(data).then((res) => {
							console.log(res);
							var resData = res
							if (resData.code == "200") {

								uni.navigateBack({
									delta: 1 // 默认值是1，表示返回的页面层数
								});
							} else {
								uni.showToast({
									title: '保存失败',
									duration: 2000,
									icon: 'none'
								})
							}
						})
					}

				}
			},
			appUpdateOneSchedule() {
				var data = this.dataSubmit
				this.$api.appUpdateOneSchedule(data).then((res) => {
					console.log(res);
					var resData = res
					if (resData.code == "200") {

						uni.navigateBack({
							delta: 1
						});
					} else {
						uni.showToast({
							title: '保存失败',
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			appUpdateFutureSchedule() {
				var data = this.dataSubmit
				this.$api.appUpdateFutureSchedule(data).then((res) => {
					console.log(res);
					var resData = res
					if (resData.code == "200") {

						uni.navigateBack({
							delta: 1
						});
					} else {
						uni.showToast({
							title: '保存失败',
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			updateSchedule() {
				var data = this.dataSubmit
				this.$api.updateSchedule(data).then((res) => {
					console.log(res);
					var resData = res
					if (resData.code == "200") {

						uni.navigateBack({
							delta: 1
						});
					} else {
						uni.showToast({
							title: '保存失败',
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			checkThis(index, background) {
				this.checkedIndex = index
				this.backgroundIndex = background

			},
			checkIcon(index, val) {
				this.checkedIcon = val.url
				this.checkedIconIndex = val.id

			},



		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 100%;
		margin: 0;
		background-color: $page-bg !important;
	}

	.css-theme {
		@include text-color();
		@include base-background();
		@include border-color();
		@include shadow-color();
	}

	.container_box_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 20rpx;
		margin: 16rpx 0rpx;
		border-radius: 8px;
	}

	.checkedIcon_top {
		width: 40px;
		height: 40px;
		border-radius: 5px;
		background-color: antiquewhite;
		line-height: 40px;
		text-align: center;
		font-size: 20px;
		display: inline-block;
	}

	.iconClass_top {
		width: 30px;
		height: 30px;
		// margin-top: 5px;
	}

	.checkedIcon {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background-color: antiquewhite;
		line-height: 60px;
		text-align: center;
		font-size: 20px;
		display: inline-block;
	}



	.border-bottom {
		border-bottom-width: 1px;
		border-style: solid;
		border-color: #EBEBEB;
	}

	.list-item-left-icon-text {
		font-size: 26px;
	}

	.emojifont {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		// background-color: #F3F4F6;
		// line-height: 50px;
		text-align: center;
		font-size: 20px;
		margin-right: 5px;
		margin-bottom: 5px;
		display: inline-block;
		justify-content: center;

	}

	.color_style {
		height: 50rpx;
		width: 50rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flex {
		display: flex;
		flex-direction: row;
	}

	.flex-row {
		flex-direction: row;
	}

	.flex-column {
		flex-direction: column;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.px-2 {
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.flex-1 {
		flex: 1;
	}

	.px-1 {
		padding-left: 10rpx;
		padding-right: 10rpx;
	}



	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}


	.scroll-view-item_H {
		display: inline-block;
		width: 100%;

		text-align: center;
		font-size: 36px;
	}

	.contentWeek {
		display: flex;
		flex-direction: column;
		width: 100%;
		flex: 1;
		float: left;

		.nav {
			// border-top: 1rpx solid #f2f2f2;
			// position: fixed;
			z-index: 99;
			width: 100%;
			align-items: center;
			// height: 100rpx;

			.tab-scroll {
				flex: 1;
				overflow: hidden;

				.tab-scroll_box {
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					box-sizing: border-box;

					.tab-scroll_item {

						display: flex;
						justify-content: center;
						border-radius: 50%;
						// background-color: #F7F8FA;
						font-size: 12px;
						height: 60rpx;
						width: 60rpx;
						line-height: 60rpx;
						margin-right: 10px;
						align-items: center;
						// color: #000;
					}
				}
			}
		}

		.swiper-content {
			padding-top: 90rpx;
			flex: 1;

			.swiperitem-content {
				background-color: $page-bg;

				.nav_item {
					background-color: $page-bg;
					// padding:20rpx 40rpx 0rpx 40rpx ;
				}
			}
		}
	}

	.contentnav {
		display: flex;
		flex-direction: column;
		width: 100%;
		flex: 1;
		float: left;

		.nav {
			// border-top: 1rpx solid #f2f2f2;
			// position: fixed;
			z-index: 99;
			width: 100%;
			align-items: center;
			// height: 100rpx;

			.tab-scroll {
				flex: 1;
				overflow: hidden;

				.tab-scroll_box {
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					box-sizing: border-box;

					.tab-scroll_item {
						// line-height: 60rpx;
						// margin-right: 35rpx;
						flex-shrink: 0;
						// padding-bottom:10px;
						display: flex;
						justify-content: center;
						// font-size: 16px;
						// padding-top: 10px;
						// border-radius: 20rpx;
						// background-color: #12BA7D;
						// padding: 0px 10px;
						font-size: 14px;
						height: 50rpx;
						line-height: 50rpx;
						// color: white;
						margin-right: 10px;
					}
				}
			}
		}

		.swiper-content {
			padding-top: 90rpx;
			flex: 1;

			.swiperitem-content {
				background-color: $page-bg;

				.nav_item {
					background-color: $page-bg;
					// padding:20rpx 40rpx 0rpx 40rpx ;
				}
			}
		}
	}

	.contentclass {
		display: flex;
		flex-direction: column;
		width: 100%;
		flex: 1;
		float: left;


		.nav {
			// border-top: 1rpx solid #f2f2f2;
			// position: fixed;
			z-index: 99;
			width: 100%;
			align-items: center;
			// height: 100rpx;

			.tab-scroll {
				flex: 1;
				overflow: hidden;

				.tab-scroll_box {
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					box-sizing: border-box;

					.tab-scroll_item {
						// line-height: 60rpx;
						// margin-right: 35rpx;
						flex-shrink: 0;
						// padding-bottom:10px;
						display: flex;
						justify-content: center;
						// font-size: 16px;
						// padding-top: 10px;
						border-radius: 20rpx;
						// background-color: #ECF1F7;
						padding: 0px 10px;
						font-size: 14px;
						height: 42rpx;
						line-height: 42rpx;
						// color: white;
						margin-right: 10px;
						// color: #000;
					}
				}
			}
		}

		.swiper-content {
			padding-top: 90rpx;
			flex: 1;

			.swiperitem-content {
				background-color: $page-bg;

				.nav_item {
					background-color: $page-bg;
					// padding:20rpx 40rpx 0rpx 40rpx ;
				}
			}
		}
	}

	.active {
		position: relative;
		// color: #fff !important;
		// font-weight: 600;
		background-color: #5A9CFA !important;
		color: white;
		// font-size: 18px !important;
	}
	.activeTime{
		position: relative;
		background-color: #5A9CFA !important;
		color: white;
	}
	.activeTime::after {
		content: "";
		position: absolute;
		width: 130rpx;
		height: 4rpx;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}
	.active::after {
		content: "";
		position: absolute;
		width: 130rpx;
		height: 4rpx;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}

	.container {
		padding: 20rpx;
		width: 94%;
		float: left;
		margin-left: 3%;
		margin-top: 20rpx;
		// background-color: #ffffff;
		border-radius: 5px;

	}

	.top_box {
		float: left;
		width: 100%;

	}

	.input-container {
		display: flex;
		align-items: center;
		// color: #000;
	}

	.label {
		width: 100px;
		font-size: 16px;
	}


	.fixed-image {
		position: fixed;
		right: 20px;
		/* 可根据需要调整位置 */
		bottom: 20px;
		/* 可根据需要调整位置 */
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
	}

	.fixed-image image {
		width: 80rpx;
		height: 80rpx;
	}

	.container_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 20rpx;
		// border: 1px solid #f1f1f1;
		margin: 16rpx 0rpx;
		border-radius: 8px;
	}

	.container_box_v {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 10rpx;
		margin: 16rpx 0rpx;
	}

	.container_box_v_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 10rpx;
		margin: 16rpx 0rpx;
		border-radius: 5px;
		// color: white
	}

	.container_box_v_top_padding {
		padding: 40rpx;
	}

	.container_box_left {
		display: flex;
		align-items: center;
		float: left;
		width: 100%;
	}

	.container_box_left input {
		width: 100%;
		float: left;
	}

	.container_box_left image {
		width: 20px;
		height: 20px;
	}

	.container_box_left_text {
		color: #f1f1f1;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.container_box_left_char {
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.placeholder_style {
		color: #ccc;
		font-size: 14px;
	}



	.checkmark {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		background-color: white;

	}

	.text_max {
		font-size: 16px;

	}

	.text_min {
		font-size: 12px;

		padding-top: 20rpx;
	}

	.right {
		display: flex;
	}

	.button_v {
		margin-left: 10px;
		background-color: none;
		border: none;
		color: white;
		padding: 5rpx 10rpx;

	}

	.button_v_max {
		font-size: 40px;
	}

	.button_v_min {
		padding-top: 28px;
		font-size: 12px;
	}

	.image_v {
		margin-left: auto;
	}

	.item {
		/* margin-bottom: 20rpx; */
		background-color: #aaa;
		padding: 10px;
		border-radius: 5px;
	}

	.value_top {
		color: white;
		font-size: 16px;
	}

	.value_bottom {
		// color: white;
		font-size: 12px;
		margin-top: 16rpx;
	}

	.mid_font {
		text-align: center;
		color: white;
		font-size: 20px;
	}

	.bottom_margin {
		/* margin-bottom: 20rpx; */
	}

	.text_right {

		margin-left: auto;
		margin-right: 1px;

	}

	.bottom {
		display: flex;
		align-items: center;
		cursor: pointer;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}

	.bottom text {
		text-align: center;
	}

	.bottom_text_style_top {
		font-size: 12px;
		color: white;
	}

	.container_box_mid {
		justify-content: space-between;
		align-items: center;
		margin: 16rpx 0rpx;
	}

	.timeshow {
		padding: 0px 10px;
		border-radius: 20px;
		background-color: #5A9CFA;
		color: white;
		margin-left: 8px;
		float: left;
		height: 24px;
		line-height: 24px;
		margin-bottom: 3px;
		position: relative;
	}

	.timeshow_del {
		position: absolute;
		right: 0px;
		top: -3px;
		background-color: red;
		border-radius: 50%;
		width: 12px;
		height: 12px;
		line-height: 12px;
		text-align: center;

	}

	.popup-content {
		padding: 60rpx 20rpx;
	}


	.iconClass {
		width: 40px;
		height: 40px;
		margin-top: 10px;
	}

	.u-grid-item-cls {

		width: 60px;
		height: 60px;
		border-radius: 50%;
		line-height: 60px;
		text-align: center;
		font-size: 24px;
		position: relative;

	}


	.iconstyle {
		position: absolute;
		bottom: -20px;
		right: -5px;
		border-radius: 30px;
		color: $uni-theme-color
	}

	.header {
		display: flex;
		align-items: center;

		cursor: pointer;
		background-color: #007bff;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		height: 8%;
	}

	.title {

		padding: 3px 5px;
		text-align: left;
	}

	.icon {
		width: 20px;
		height: 20px;
		margin-left: 1px;
	}

	.icon_right {
		width: 20px;
		height: 20px;
		margin-left: auto;
		margin-right: 1px;

	}


	.item_box_title {
		line-height: 50px;
		font-weight: bolder;
		font-size: 16px;
	}

	.category-item-save {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;

	}

	.container_box_add {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 20rpx;
		border-bottom: 1px solid #f1f1f1;
		border-radius: 8px;

	}

	.activeitem {
		color: #ffffff !important;
		background-color: #5A9CFA !important;
	}

	.container_bot {
		padding: 60px 20px 50px 20px;
		border: 1px solid #ccc;
		border-radius: 20rpx;
	}

	.row_bot {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: -10px;
	}

	.category-item {
		width: 30%;
		margin-bottom: 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		border-radius: 8px;
		cursor: pointer;
		height: 60rpx;
		line-height: 20px;

	}

	.category-item-month {
		width: 10%;
		margin-bottom: 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		border-radius: 8px;
		cursor: pointer;
		height: 60rpx;
		line-height: 20px;
	}

	.timeshow {
		padding: 0px 10px;
		border-radius: 20px;
		background-color: #5A9CFA;
		color: white;
		margin-left: 8px;
		float: left;
		height: 24px;
		line-height: 24px;
		margin-bottom: 3px;
		position: relative;
	}

	.timeshow_del {
		position: absolute;
		right: 0px;
		top: -3px;
		background-color: red;
		border-radius: 50%;
		width: 12px;
		height: 12px;
		line-height: 12px;
		text-align: center;

	}

	.save_btn {
		text-align: right;
		background-color: #5A9CFA;
		color: white;
		width: 90px;
		border-radius: 30px;
		border: none;
		text-align: center;
		height: 36px;
		line-height: 36px;
	}
</style>